<script setup>
import {  watch, computed, onMounted } from "vue";
import { handleClick } from "@/utils/index";
import { useRoute } from "vue-router";

const route = useRoute();
const props = defineProps(["content", "selectCurrent"]);

const style = computed(() => ({
  opacity: props.content.style.opacity + "!important",
  width: route.path == "/works/add" ? "100%" : props.content.style.with + "%",
  height:
    route.path == "/works/add" ? "100%" : props.content.style.height + "%",
  position: route.path != "/works/add" ? "absolute" : "",
  top: props.content.style.top,
  left: props.content.style.left,
}));

watch(
  () => props.content,
  (newValue) => {},
  {
    deep: true,
  }
);
</script>
<template>
  <img
    :class="props.content.etranceAnimation"
    :style="style"
    :src="props.content.url"
    @click="handleClick(content)"
  />
</template>

<style lang="less" scoped>
// img {
//   width: 100%;
//   height: 100%;
// }
</style>
